<template>
  <view>
    <!-- 顶栏 -->
    <u-navbar
      title="违章详情"
      title-color="#000"
      title-size="38"
      :border-bottom="false"
    >
      <template v-slot:right>
        <!-- <view class="notice btn">本季度违章通知</view> -->
      </template>
    </u-navbar>
    <view class="violation-list" v-if="list.length != 0">
      <view class="violation-list-item" v-for="(item, index) in list">
        {{ index + 1 }}. {{ body }}
      </view>
      <u-loadmore :status="status" />
    </view>
    <view class="violation-none" v-else>
      <image src="/static/img/none-car.svg" mode=""></image>
      <view class="text">暂时没有违章</view>
    </view>
  </view>
</template>

<script>
import { getViolationDetail } from "@/api/home.js";
export default {
  data() {
    return {
      plate: null,
      status: "loadmore",
      page: 1,
      limit: 10,
      list: [],
    };
  },
  onLoad(options) {
    this.plate = options.plate;
    this.onLoadMore();
  },
  onReachBottom() {
    this.status = "loading";
    this.page = ++this.page;
    this.limit += 10;
  },
  methods: {
    onLoadMore() {
      let data = {
        plate_num: this.plate,
        page: this.page,
        limit: this.limit,
      };
      getViolationDetail(data).then((res) => {
        if (res.code == 200) {
          this.list = this.list.concat(res.data.data.data);
          this.status = "loadmore";
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.notice {
  background-color: #2b6cfc;
  border-radius: 30px;
  color: #ffffff;
  margin-right: 30rpx;
  padding: 8rpx 16rpx;
  letter-spacing: -1rpx;
  font-size: 26rpx;
}

.violation-list {
  margin: 0 30rpx;

  &-item {
    border-bottom: 2rpx solid #e6e6e6;
    padding: 30rpx 0;
    font-size: 28rpx;
  }
}

.violation-none {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  image {
    width: 400rpx;
    height: 400rpx;
    margin: 100rpx 0;
  }
  .text {
    margin-top: 0rpx;
    font-size: 34rpx;
  }
}
</style>
